<template>
  <div class="pagination">
    <slot></slot>
    <el-pagination
      v-model:current-page="data.page"
      v-model:page-size="data.size"
      :page-sizes="[2, 10, 15, 20, 30]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

type Props = {
  total?: number
}
withDefaults(defineProps<Props>(), {
  total: 0
})

const emits = defineEmits(['pageChange'])

const data = reactive({
  page: 1,
  size: 10
})

const handleSizeChange = (val: number) => {
  data.size = val
  emits('pageChange', data)
}
const handleCurrentChange = (val: number) => {
  data.page = val
  emits('pageChange', data)
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  margin-top: 10px;
  .el-pagination {
    margin-left: auto;
  }
}
</style>
